<!DOCTYPE HTML>
<html>
<head th:include="/common/head :: head"></head>
<style>
#buttonArr .btn {
	height: 40px;
	padding-top: 8px;
	font-size: 16px;
}
</style>
<body class="pos-r">
	<div>

		<nav class="breadcrumb"
			th:include="/common/navbar :: navbar('用户管理','入会审核')"></nav>

		<div class="page-container">
			<div class="mt-20">
				<div class="btn-group" id="buttonArr" style="margin-bottom: 15px;">
					<span class="btn radius btn-primary" data-value="待审核">待审核 <span
						class="badge badge-secondary" id="waitAudit"></span>
					</span> <span class="btn radius " data-value="通过">通过 <span
						class="badge badge-success" id="pass"></span>
					</span> <span class="btn radius " data-value="未通过">未通过 <span
						class="badge badge-warning" id="noPass"></span>
					</span>
				</div>
				<table
					class="table table-border table-bordered table-bg table-hover table-sort">
					<thead>
						<tr class="text-c">
							<th width="40">账号</th>
							<th width="40">姓名</th>
							<th width="60">手机号</th>
							<th width="60">公司</th>
							<th width="100">职务</th>
							<th width="100">审核状态</th>
							<th width="100">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-c va-m" th:each="vo,voStat : ${list}">
							<td class="text-l"><a style="color:blue" th:href="@{/user/checkUser(id=${vo.userId})}" th:text="${vo.userCode}"></a></td>
							<td class="text-l"><a style="color:blue" th:href="@{/user/auditDetail(id=${vo.id})}" th:text="${vo.name}"></a></td>
							<td class="text-l" th:text="${vo.mobile}"></td>
							<td class="text-l" th:text="${vo.company}"></td>
							<td class="text-l" th:text="${vo.position}"></td>
							<td class="text-l" th:text="${vo.auditStatus != null ? vo.auditStatus.value : ''}"></td>
							<td class="text-l" > <a class="btn" th:href="@{/user/auditDetail(id=${vo.id})}"> 查看</a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>


	<script type="text/javascript"
		src="/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
	<script type="text/javascript"
		src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>


	<script type="text/javascript">
		//初始化表格
		$('.table-sort').dataTable({
			"aaSorting" : [ [ 1, "desc" ] ],//默认第几个排序
			"bStateSave" : true,//状态保存
			"aoColumnDefs" : [ {
				"orderable" : false,
				"aTargets" : [ 6 ]
			} // 制定列不参与排序
			]
		});


		var $table = $('.table-sort').DataTable();
		
		//根据审核状态筛选数据
		$("#buttonArr .radius").on("click", function(event) {
			$(this).siblings().removeClass("btn-primary");
			$(this).addClass("btn-primary");
			var searchVal = "^" + $(this).data("value");
			$table.columns(5).search(searchVal, true).draw();
		})

		//消除缓存带来的影响，获取全部表格数据
		$(function() {
			$('.table-sort').DataTable().columns(5).search("").draw();
			var arr = $table.columns(5).data().eq(0);
			var waitAuditNum = 0;
			var passNum = 0;
			var noPassNum = 0;

			$.each(arr, function(i, e) {
				if (e == "待审核") {
					waitAuditNum++;
				} else if (e == "通过") {
					passNum++;
				} else if (e == "未通过") {
					noPassNum++;
				}
			})
			$("#waitAudit").text(waitAuditNum);
			$("#pass").text(passNum);
			$("#noPass").text(noPassNum);
			
			//默认表格数据为待审核
			$table.columns(5).search("^待审核", true).draw();
		})

		
	</script>
</body>
</html>